<template>
    <div class="flowCanvas">
        <div class="container" ref="container"></div>
        <!-- 节点面板 -->
        <CustomNodePanel v-if="lf" :lf="lf"></CustomNodePanel>
        <!-- 数据面板 -->
        <BpmnDataPanel v-if="lf" :lf="lf"></BpmnDataPanel>
        <!-- 弹窗编辑 -->
        <el-drawer title="编辑节点" :modal="false" v-model="drawer" :direction="'rtl'">
            <div>节点ID: {{ currentNode.data.id }}</div>
            <div>节点名称:<input v-model="nodeText"> </div>   <!--{{ currentNode.data.text ? currentNode.data.text.value : '没有配置节点text值' }}-->
            <!-- <div><input type="text" v-model="currentNode.data.properties.PropValue"></div> -->
            <div>角色名称:  
                <!-- <el-select v-model="form.roleid" placeholder="请输入数据类型">
          <el-option v-for="i in rolelist" :key="i.roleid" :label="i.name" :value="i.roleid" />
        </el-select> -->
        <el-select v-model="value" placeholder="请填入角色" size="large" style="width: 240px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
    </div>
            <div><button type="button" @click="handlerSetPropValue">保存</button></div>
        </el-drawer>
    </div>
</template>

<script>
import LogicFlow from "@logicflow/core";

// import "@logicflow/core/dist/style/index.css";
import "@logicflow/core/dist/index.css";
import {
    BpmnElement,
    BpmnXmlAdapter,
    Snapshot,
    Control,
    Menu,
    SelectionSelect,
} from "@logicflow/extension";
import "@logicflow/extension/lib/style/index.css";
 import { reactive, ref,onMounted } from 'vue'
// import CustomNodePanel from "./components/CustomNodePanel.vue";
// import BpmnDataPanel from "./components/BpnmDataPanel.vue";
import CustomNodePanel from "@/components/CustomNodePanel.vue";
import BpmnDataPanel from "@/components/BpnmDataPanel.vue";
import {GetRoleList} from '@/api/loglists/index'



export default {
    name: "logicflowCustom",
    data () {
        return {
            lf: null,
            drawer: false,
            currentNode: null,
            value: '',
            nodeText:'',
            options: []
        };
    },
    components: { CustomNodePanel, BpmnDataPanel },

    mounted () {
        this.GetRoleListData();
        LogicFlow.use(BpmnElement);
        LogicFlow.use(BpmnXmlAdapter);
        LogicFlow.use(Snapshot);
        LogicFlow.use(Control);
        LogicFlow.use(Menu);
        LogicFlow.use(SelectionSelect);
        //初始化
        this.lf = new LogicFlow({
            container: this.$refs.container,
            grid: {
                size: 10,
                visible: true,
                type: "mesh",
                config: {
                    color: "#ababab",
                    thickness: 1,
                },
            },
        });
        this.lf.render();
        //绑定事件
        const { eventCenter } = this.lf.graphModel;
        this.bindEvent(eventCenter);


    },

    methods: {
        async GetRoleListData() {
        
            const res = await GetRoleList();
            console.log(res.data);

            // 更新 options 中第一个元素的 value 和 label
            this.options = res.data.map(role => ({
                    value: role.roleid,
                    label: role.name,
                }));
              
                
            // 如果需要更新更多选项，可以添加相应逻辑
       
    },
        bindEvent (eventCenter) {
            eventCenter.on("node:click", (args) => {
                console.log("节点单击", args);
                this.drawer = true;
                this.currentNode = args;
                this.nodeText =this.currentNode.data.text.value;
            });
        },
        handlerSetPropValue () {
           console.log(this.value);
           
            this.lf.setProperties(this.currentNode.data.id, {
                PropValue: this.value//this.currentNode.data.properties.PropValue
            })
            this.lf.graphModel.updateText(this.currentNode.data.id,  this.nodeText);
            //this.lf.currentNode.data.text.value = this.nodeText;
        }

    },
};





</script>

<style>
.flowCanvas {
    position: relative;
    width: 100%;
    height: 100vh;
    margin: 0px;
    display: flex;
}

.flowCanvas .container {
    display: flex;
    flex-grow: 1;
    /*铺满剩余空间*/
    border: 3px solid #ababab;
    overflow: hidden;
}
</style>